<template>
  <div>
    <a-page-header
      title="评价指标体系管理"
      sub-title="维护评价指标和模板"
    />
    
    <a-tabs defaultActiveKey="1">
      <a-tab-pane key="1" tab="指标等级维护">
        <a-card>
          <div style="margin-bottom: 16px;">
            <a-button type="primary" @click="showLevelModal">
              <a-icon type="plus" /> 添加等级
            </a-button>
          </div>
          <a-table
            :columns="levelColumns"
            :dataSource="levelData"
            rowKey="id"
            :pagination="false"
          >
            <template slot="color" slot-scope="text">
              <a-tag :color="text">{{text}}</a-tag>
            </template>
            <template slot="action" slot-scope="text, record">
              <a-button type="link" size="small" @click="editLevel(record)">编辑</a-button>
              <a-divider type="vertical" />
              <a-button type="link" size="small" @click="deleteLevel(record)">删除</a-button>
            </template>
          </a-table>
        </a-card>
      </a-tab-pane>
      
      <a-tab-pane key="2" tab="指标库维护" forceRender>
        <indicator-library />
      </a-tab-pane>
      
      <a-tab-pane key="3" tab="部门指标维护">
        <department-indicator />
      </a-tab-pane>
      
      <a-tab-pane key="4" tab="评价模板设置">
        <template-settings />
      </a-tab-pane>
    </a-tabs>
    
    <a-modal
      :title="levelModalTitle"
      :visible="levelModalVisible"
      @ok="handleLevelOk"
      @cancel="handleLevelCancel"
    >
      <a-form :form="levelForm" layout="vertical">
        <a-form-item label="等级名称">
          <a-input
            v-decorator="['name', { rules: [{ required: true, message: '请输入等级名称' }] }]"
            placeholder="如：优秀、良好等"
          />
        </a-form-item>
        <a-form-item label="等级分值">
          <a-input-number
            v-decorator="['score', { rules: [{ required: true, message: '请输入分值' }] }]"
            :min="0"
            :max="100"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="颜色标识">
          <a-select
            v-decorator="['color', { rules: [{ required: true, message: '请选择颜色' }] }]"
            placeholder="请选择颜色"
          >
            <a-select-option value="red">红色</a-select-option>
            <a-select-option value="orange">橙色</a-select-option>
            <a-select-option value="yellow">黄色</a-select-option>
            <a-select-option value="green">绿色</a-select-option>
            <a-select-option value="blue">蓝色</a-select-option>
            <a-select-option value="purple">紫色</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="描述">
          <a-textarea
            v-decorator="['description']"
            :rows="3"
            placeholder="请输入等级描述"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import IndicatorLibrary from './modules/IndicatorLibrary'
import DepartmentIndicator from './modules/DepartmentIndicator'
import TemplateSettings from './modules/TemplateSettings'

export default {
  components: {
    IndicatorLibrary,
    DepartmentIndicator,
    TemplateSettings
  },
  data() {
    return {
      levelColumns: [
        {
          title: '等级名称',
          dataIndex: 'name',
          key: 'name'
        },
        {
          title: '分值',
          dataIndex: 'score',
          key: 'score'
        },
        {
          title: '颜色标识',
          dataIndex: 'color',
          key: 'color',
          scopedSlots: { customRender: 'color' }
        },
        {
          title: '描述',
          dataIndex: 'description',
          key: 'description',
          ellipsis: true
        },
        {
          title: '操作',
          key: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      levelData: [
        {
          id: '1',
          name: '优秀',
          score: 90,
          color: 'green',
          description: '教学质量优秀，各方面表现突出'
        },
        {
          id: '2',
          name: '良好',
          score: 80,
          color: 'blue',
          description: '教学质量良好，各方面表现较好'
        },
        {
          id: '3',
          name: '中等',
          score: 70,
          color: 'yellow',
          description: '教学质量中等，基本达到要求'
        },
        {
          id: '4',
          name: '合格',
          score: 60,
          color: 'orange',
          description: '教学质量合格，基本达到最低要求'
        },
        {
          id: '5',
          name: '不合格',
          score: 50,
          color: 'red',
          description: '教学质量不合格，需要改进'
        }
      ],
      levelModalVisible: false,
      currentLevel: null,
      levelModalTitle: '添加等级'
    }
  },
  beforeCreate() {
    this.levelForm = this.$form.createForm(this, { name: 'level_form' })
  },
  methods: {
    showLevelModal() {
      this.currentLevel = null
      this.levelModalTitle = '添加等级'
      this.levelModalVisible = true
      this.$nextTick(() => {
        this.levelForm.resetFields()
      })
    },
    editLevel(record) {
      this.currentLevel = record
      this.levelModalTitle = '编辑等级'
      this.levelModalVisible = true
      this.$nextTick(() => {
        this.levelForm.setFieldsValue({
          name: record.name,
          score: record.score,
          color: record.color,
          description: record.description
        })
      })
    },
    deleteLevel(record) {
      this.$confirm({
        title: '确认删除',
        content: `确定要删除等级"${record.name}"吗？`,
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.levelData = this.levelData.filter(item => item.id !== record.id)
          this.$message.success('删除成功')
        }
      })
    },
    handleLevelOk() {
      this.levelForm.validateFields((err, values) => {
        if (!err) {
          if (this.currentLevel) {
            // 更新
            Object.assign(this.currentLevel, values)
            this.$message.success('更新成功')
          } else {
            // 新增
            const newLevel = {
              id: `level_${Date.now()}`,
              ...values
            }
            this.levelData.push(newLevel)
            this.$message.success('添加成功')
          }
          this.levelModalVisible = false
        }
      })
    },
    handleLevelCancel() {
      this.levelModalVisible = false
    }
  }
}
</script>